import React, { Component, Fragment } from "react";
import { Table, Card, Button, Input } from "antd";
import "./articleLists.scss";
import articlesConfig from "../../config/articlesConfig";
import { getArticles } from "../../api/articles";
const { Search } = Input;

export default class ArticleLists extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      queryInfo: {
        query: "",
        pageSize: 15,
        pageNum: 1,
      },
    };
  }
  componentWillMount() {
    this.getList();
  }
  getList = async () => {
    const { queryInfo } = this.state;
    let { data: res } = await getArticles(queryInfo);
    this.setState({
      dataSource: res.data,
    });
  };
  render() {
    let { dataSource } = this.state;
    const extra = (
      <Fragment>
        <Search
          className="search-input"
          placeholder="input search text"
          onSearch={(value) => console.log(value)}
          style={{ width: 300 }}
        />
        <Button className="add-btn" type="primary">
          添加
        </Button>
      </Fragment>
    );
    return (
      <Card extra={extra}>
        <Table size='small' dataSource={dataSource} columns={articlesConfig} />
      </Card>
    );
  }
}
